<template>
	<view>
		<view class="ticketinfo-container">
			<!-- 顶部固定区域 -->
			<view class="ticketinfo-header">
				<!-- #ifdef MP-WEIXIN -->
				<!-- 微信小程序中不显示按钮 -->
				<!-- #endif -->

				<!-- #ifndef MP-WEIXIN -->
				<!-- 非微信小程序平台（包括iOS和Android）显示按钮 -->
				<view class="back-icon">
					<uni-icons type="left" size="25" @click="goBack()"></uni-icons>
				</view>
				<!-- #endif -->
				<view class="title">
					{{title}}
				</view>
			</view>
			<view class="ticketinfo-content">
				<view class="row-list-box">
					<view class="row-list-text">
						日期
					</view>

					<view class="row-list">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
							<view class="scroll-view-item_H" v-for="(item, index) in saleTicketDateList.data.list"
								:key="index">
								<view class="date-item"
									:class="{ 'disabled': item.statusCode === 0, 'selected': selectedDateIndex === index && item.statusCode === 1 }"
									@click="selectDate(index)">
									<view class="date-time-day">
										{{item.day}}
									</view>
									<view class="date-time-bottom">
										<view class="date-time-status" v-if="item.statusCode === 0">
											<!-- <text v-if="item.statusCode === 0">无票</text> -->{{item.status}}
										</view>
										<view class="date-time-weeknum" v-if="item.statusCode !== 0">
											{{item.weekDay}}
										</view>
										<view class="date-time-hour" v-if="item.statusCode !== 0">
											{{item.time}}
										</view>
									</view>
								</view>
								<view class="date-item-mask" v-if="item.statusCode === 0">

								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="row-list-box" v-if="selectedDateIndex !== null">
					<view class="row-list-text">
						票面
					</view>
					<view class="row-list">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
							<view class="scroll-view-item_H"
								v-for="(item, ticketIndex) in saleTicketDateList.data.list[selectedDateIndex].ticketList"
								:key="ticketIndex">
								<view class="ticketprice-item"
									:class="{ 'disabled': item.statusCode === 0, 'selected': selectedTicketIndex === ticketIndex && item.statusCode === 1 }"
									@click="selectTicket(ticketIndex)">
									<view class="ticket-type">
										{{item.ticketType}}
									</view>
									<view class="ticket-price">
										{{item.ticketPrice}}元
									</view>
									<view class="ticket-status" v-if="item.statusCode === 0">
										{{item.status}}
									</view>
								</view>
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="row-list-box">
					<view class="row-list-text">
						数量
					</view>
					<view class="quantity-box-computed">
						<view class="computed-btn" :class="{'btn-disable': limitNum === 1}" @click="del()">-</view>
						<view class="limit-num">
							{{limitNum}}
						</view>
						<view class="computed-btn" :class="{'btn-disable': limitNum === maxLimitNum}" @click="add()">+
						</view>
						<view class="tip">
							每单限购{{maxLimitNum}}张
						</view>
					</view>
				</view>
				<view class="row-list-box">
					<view class="row-list-text">
						配送方式
					</view>
					<view class="row-list">
						<view class="row-list-item" :class="{'selected': selectDistributionId === item.id}"
							v-for="(item, index) in distributionList" :key="index" @click="selectDistribution(item.id)">
							{{item.name}}
						</view>
					</view>


				</view>
			</view>
		</view>
		<view class="footer">
			<view class="sure-btn-box">
				<view class="total-price">
					合计：<text class="red"> <text class="tiny">￥</text> {{totalPrice}} </text>
				</view>
				<view class="sure-btn" @click="toOderResult(totalPrice)"
					:class="{'have-price': totalPrice !== 0 ,'none-price': totalPrice === 0 }">
					确定
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onBeforeMount,
		onMounted,
		onUnmounted,
		watch,
		watchEffect,
		computed,
	} from 'vue';
	import {
		onShow,
		onHide,
		onUnload,
		onLoad
	} from '@dcloudio/uni-app';
	import generateSeat from '@/common/seatGenerator.js';
	//演出标题，从上一页跳转获取
	const title = ref("");

	//限制购买数量初始化
	let limitNum = ref(1);
	//初始化装填传递过来的演出详情的数据
	let showDetailContainer = ref({});
	let allData = ref(null);

	let maxLimitNum = ref(0);

	//总价初始化
	let totalPrice = ref(0);

	let selectDateObj = ref({});

	let selectTicketObj = ref({});
	//添加数量按钮
	let add = () => {
		if (limitNum.value < maxLimitNum.value) {
			limitNum.value++;
			updateTotalPrice();
		}
	}
	//减少数量按钮
	let del = () => {
		if (limitNum.value > 1) {
			limitNum.value--;
			updateTotalPrice();
		}
	}

	//更新总价
	const updateTotalPrice = () => {
		if (selectedDateIndex.value !== null && selectedTicketIndex.value !== null) {
			const selectedTicket = saleTicketDateList.value.data.list[selectedDateIndex.value].ticketList[
				selectedTicketIndex.value];
			totalPrice.value = selectedTicket.ticketPrice * limitNum.value;
		} else {
			totalPrice.value = 0;
		}
	};

	let toOderResult = (num) => {
		let pushData = {};
		pushData.ticketPrice = num;
		pushData.limitNum = limitNum.value;
		pushData.selectDateObj = selectDateObj.value;
		pushData.selectTicketObj = selectTicketObj.value;
		const seatList =  [];
		
		
		for(let i=0; i< limitNum.value; i++){
			const seatItem = generateSeat(selectTicketObj.value.ticketType);
			seatList.push(seatItem);
		}
		pushData.seatInfo = seatList;
		pushData.allData = allData.value;
		console.log("pddateobj:", selectDateObj.vlue);
		pushData.setDistributionType = distributionType.value;
		console.log("pushData：", pushData.setDistributionType);
		if (num !== 1) {
			uni.setStorage({
				key: 'storage_key',
				data: pushData,
				success: function() {
					console.log('数据存储成功');
					uni.navigateTo({
						url: "/pages/orderbilling/orderbilling"
					});
				},
				fail: function(err) {
					console.error('数据存储失败', err);
				}
			});
		} else {
			console.log('数量为0，无法提交订单');
		}
	}
	//耦合测试data，后期解耦
	let saleTicketDateList = ref({
		code: 2000,
		msg: "success",
		data: {
			list: [{
					id: 0,
					day: "11.01",
					weekDay: "星期六",
					time: "18:00",
					status: "无票",
					statusCode: 0,
					ticketList: []
				},
				{
					id: 1,
					day: "11.02",
					weekDay: "星期日",
					time: "18:00",
					status: "无票",
					statusCode: 0,
					ticketList: []
				},
				{
					id: 2,
					day: "11.03",
					weekDay: "星期一",
					time: "19:00",
					status: "有票",
					statusCode: 1,
					ticketList: [{
							id: 0,
							ticketType: "D级票",
							ticketPrice: 240,
							status: "有货",
							statusCode: 1,
							quantity: 352
						},
						{
							id: 1,
							ticketType: "C级票",
							ticketPrice: 360,
							status: "有货",
							statusCode: 1,
							quantity: 223
						},
						{
							id: 2,
							ticketType: "B级票",
							ticketPrice: 480,
							status: "有货",
							statusCode: 1,
							quantity: 67
						},
						{
							id: 3,
							ticketType: "A级票",
							ticketPrice: 600,
							status: "有货",
							statusCode: 1,
							quantity: 67
						},
						{
							id: 4,
							ticketType: "VIP票",
							ticketPrice: 720,
							status: "缺货",
							statusCode: 0,
							quantity: 0
						}
					]
				},
				{
					id: 3,
					day: "11.04",
					weekDay: "星期二",
					time: "20:00",
					status: "有票",
					statusCode: 1,
					ticketList: [{
							id: 0,
							ticketType: "D级票",
							ticketPrice: 340,
							status: "有货",
							statusCode: 1,
							quantity: 352
						},
						{
							id: 1,
							ticketType: "C级票",
							ticketPrice: 560,
							status: "有货",
							statusCode: 1,
							quantity: 223
						},
						{
							id: 2,
							ticketType: "B级票",
							ticketPrice: 750,
							status: "有货",
							statusCode: 1,
							quantity: 67
						},
						{
							id: 3,
							ticketType: "A级票",
							ticketPrice: 900,
							status: "有货",
							statusCode: 1,
							quantity: 67
						}
					]
				},
				{
					id: 4,
					day: "11.05",
					weekDay: "星期三",
					time: "18:00",
					status: "无票",
					statusCode: 0,
					ticketList: []
				}
			]
		}
	});
	
	

	//配送方式数组
	let distributionList = ref([{
		id: 0,
		name: "快递配送"
	}, {
		id: 1,
		name: "自助取票"
	}]);
	//选中日期数组元素的索引
	const selectedDateIndex = ref(null);
	//选中票价数组元素的索引
	const selectedTicketIndex = ref(null);
	//选中配送方式数组元素的索引
	const selectDistributionId = ref(null);

	//初始化传递到订单结算页面的配送方式
	const distributionType = ref("");

	//触发点击事件获取配送方式的索引
	const selectDistribution = (id) => {
		const selectId = id;
		const selectType = distributionList.value.find(item => item.id === selectId);
		console.log(selectType);
		selectDistributionId.value = selectId;
		distributionType.value = selectType.name;
		console.log(selectDistributionId.value, distributionType.value);
	};


	//处理日期
	const selectDate = (index) => {
		selectDateObj.value = saleTicketDateList.value.data.list[index];
		console.log("selectDateObj:", selectDateObj.value);
		const item = saleTicketDateList.value.data.list[index]; //获取对应点击索引得到的对象
		if (item.statusCode === 1) { //当日期状态为有票时进入if语句
			selectedDateIndex.value = index; //将索引的值赋值给 选中日期数组元素的索引
			// 选择新的日期时，自动选中第一个可用票种
			const firstAvailableTicketIndex = saleTicketDateList.value.data.list[index].ticketList.findIndex(ticket =>
				ticket.statusCode === 1);
			if (firstAvailableTicketIndex !== -1) { //自动选中可用票种存在时进入if语句
				selectedTicketIndex.value = firstAvailableTicketIndex;
				updateTotalPrice(); //每次重置第一可用票种后更新总价
			} else {
				selectedTicketIndex.value = null; //
			}
		} else {
			selectedDateIndex.value = null;
			selectedTicketIndex.value = null;
		}
	};

	const selectTicket = (ticketIndex) => {

		selectTicketObj.value = saleTicketDateList.value.data.list[selectedDateIndex.value].ticketList[ticketIndex];
		console.log("selectTicketObj:", selectTicketObj.value);
		const item = saleTicketDateList.value.data.list[selectedDateIndex.value].ticketList[ticketIndex];
		if (item.statusCode === 1) {
			selectedTicketIndex.value = ticketIndex;
			updateTotalPrice();
		}
	};

	const goBack = () => {
		// 处理返回逻辑
		uni.navigateBack({
			delta: 1
		})
	};

	onBeforeMount(() => {
		const firstAvailableIndex = saleTicketDateList.value.data.list.findIndex(item => item.statusCode !== 0);
		if (firstAvailableIndex !== -1) {
			selectedDateIndex.value = firstAvailableIndex;
			selectDateObj.value = saleTicketDateList.value.data.list[selectedDateIndex.value];
			console.log(selectedDateIndex.value);
			// 初始化第一个可用日期的第一个可用票种
			const firstAvailableTicketIndex = saleTicketDateList.value.data.list[firstAvailableIndex].ticketList
				.findIndex(ticket => ticket.statusCode === 1);


			if (firstAvailableTicketIndex !== -1) {
				selectedTicketIndex.value = firstAvailableTicketIndex;
				selectTicketObj.value = saleTicketDateList.value.data.list[selectedDateIndex.value].ticketList[
					selectedTicketIndex.value];
				console.log(selectedTicketIndex.value);
				updateTotalPrice();
			}
		}

		// 初始化默认选中的配送方式
		if (distributionList.value.length > 0) {
			selectDistributionId.value = 0;
			distributionType.value = distributionList.value[0].name;
		}

		//获取传递过来的数据
		uni.getStorage({
			key: 'TogetTicket',
			success: function(res) {
				console.log('获取的数据11111111111:', res.data);
				
				title.value = res.data.title;
				maxLimitNum.value = res.data.limitNum;
				allData.value = res.data;
				// getTicketInfo(res.data.id);
			},
			fail: function(err) {
				console.error('获取数据失败', err);
			}
		});
	});
	
	const getTicketInfo =(id)=>{
		const performanceId = id;
		uni.request({
			url: '/st/ticketInfo/buyTicketDetail?performanceId='+performanceId,
			method: 'GET',
			success: (res) => {
				if (res.data.code == 200) {
					console.log("dasdasdsad",res.data);
					console.log(res.data.code, "成功");
						console.log("dsadasdasd11111",res.data.data.list);
					saleTicketDateList.value.data.list = res.data.data.list;
				
				} else if (res.data.code != 200) {
					console.log(res.data.code, "异常");
				}
			}
		});
	}

	
</script>

<style lang="scss" scoped>
	.ticketinfo-container {
		width: 100%;
		min-height: 100vh;
		height: auto;
		display: block;
		background: #fff;
		overflow-x: hidden;

		.ticketinfo-header {
			float: left;
			width: 100%;
			height: 50px;
			display: flex;
			background: #fff;
			box-sizing: border-box;
			text-align: center;
			justify-content: center;
			align-items: center;
			box-shadow: 0px 0px 4px 0px #d3d3d3;

			.title {
				width: 100%;
				box-sizing: border-box;
				padding: 0px 40px;
				position: absolute;
				line-height: 50px;
				font-size: 18px;
				height: 50px;
				color: #000;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.back-icon {
				position: absolute;
				left: 10px;
				z-index: 100;
			}
		}

		.ticketinfo-content {
			width: 100%;
			height: auto;
			float: left;
			box-sizing: border-box;
			padding: 0px 20px;

			.row-list-box {
				margin-top: 30px;
				width: 100%;
				height: auto;
				float: left;

				.row-list-text {
					width: 100%;
					height: 40px;
					float: left;
					line-height: 40px;
					box-sizing: border-box;
					font-size: 12px;
				}

				.row-list {
					width: auto;
					height: auto;
					float: left;
					position: relative;

					.date-item {
						width: 95px;
						height: 56px;
						float: left;
						border: 1px solid #ddd;
						border-radius: 4px;

						.date-time-day {
							width: 100%;
							height: 28px;
							float: left;
							line-height: 28px;
							text-align: center;
						}

						.date-time-bottom {
							width: 100%;
							height: 28px;
							float: left;
							box-sizing: border-box;
							padding: 0px 5px;

							.date-time-status {
								width: 100%;
								height: 28px;
								float: left;
								line-height: 28px;
								text-align: center;
								font-size: 13px;
								text-align: center;
							}

							.date-time-weeknum {
								width: 40px;
								float: left;
								height: 28px;
								line-height: 28px;
								font-size: 13px;
								text-align: center;
							}

							.date-time-hour {
								width: 45px;
								float: left;
								height: 28px;
								line-height: 28px;
								font-size: 13px;
								text-align: center;
							}
						}

					}

					.date-item-mask {
						width: 95px;
						height: 56px;
						position: absolute;
					}

					.ticketprice-item {
						width: auto;
						height: 40px;
						float: left;
						box-sizing: border-box;
						padding: 0px 10px;
						border: 1px solid #ddd;
						border-radius: 4px;
						font-size: 14px;

						.ticket-type {
							width: auto;
							height: 40px;
							line-height: 40px;
							float: left;
							margin-right: 5px;
						}

						.ticket-price {
							width: auto;
							height: 40px;
							line-height: 40px;
							float: left;
						}

						.ticket-status {
							width: auto;
							height: 20px;
							line-height: 14px;
							float: left;
							font-size: 10px;
							color: #fff;
							box-sizing: border-box;
							padding: 3px;
							background: #ffc71c;
							margin-left: 10px;
							border-radius: 3px;
							margin-top: 10px;
							font-weight: bold;
						}
					}

					.quantity-box-computed {
						width: auto;
						height: 30px;
						float: left;
					}

					.row-list-item {
						width: auto;
						height: 40px;
						line-height: 40px;
						float: left;
						box-sizing: border-box;
						padding: 0px 10px;
						border: 1px solid #ddd;
						border-radius: 4px;
						font-size: 14px;
						margin-right: 15px;
					}
				}
			}


			.selected {
				background-color: #ff626219;
				/* 红色背景 */
				border-color: rgba(255, 98, 98, 1) !important;
				/* 红色边框 */
				color: rgba(255, 98, 98, 1);
			}


		}
	}

	.disabled {
		color: #999999 !important;
		background: #f7f7f77f !important;
		cursor: not-allowed;
	}

	.have-price {
		background: #ff2d2de2;
		color: #fff;
	}

	.none-price {
		color: #7d7d7d;
		background: #c7c7c77f;
		cursor: not-allowed;
	}

	.sure-btn-box {
		width: 100%;
		height: 80px;
		background: #fff;
		box-sizing: border-box;
		padding: 20px 15px;
		position: fixed;
		bottom: 0px;
		box-shadow: 0px 0px 4px 0px #d3d3d3;

		.total-price {
			float: left;
			line-height: 40px;

			.tiny {
				font-size: 12px !important;
			}

			.red {
				color: #ff2d2de2;
				font-weight: bold;
				font-size: 20px;
			}
		}

		.sure-btn {
			width: 160px;
			height: 40px;
			font-size: 14px;
			float: right;
			border-radius: 4px;
			line-height: 40px;
			text-align: center;
		}
	}

	.scroll-view_H {
		width: 100vw;
		box-sizing: border-box;
		white-space: nowrap;
		padding-right: 40px;

		.scroll-view-item_H {
			display: inline-block;
			margin-right: 15px;
		}

		.scroll-view-item_H:last-child {
			margin-right: 0px;
		}
	}

	.computed-btn {
		margin-top: 5px;
		width: 25px;
		height: 25px;
		line-height: 23px;
		text-align: center;
		color: #fff;
		background: #ff2d2de2;
		border-radius: 50%;
		font-size: 18px;
		float: left;
		font-weight: bold;
	}

	.limit-num {
		width: 30px;
		height: 30px;
		line-height: 37px;
		text-align: center;
		border-radius: 50%;
		float: left;
	}

	.btn-disable {
		background: #fff;
		background: #ddd;
	}

	.tip {
		width: auto;
		height: 25px;
		float: left;
		line-height: 37px;
		margin-left: 15px;
		font-size: 12px;
		color: #666;
	}
</style>